<template>
  <view class="content">
    <view class="topBox">
      <view class="tit">
        新用户注册
      </view>
      <view class="desc">
        请使用手机号码或邮箱注册账号
      </view>
    </view>

    <view class="bottomBox">
      <view class="item">
        <view class="label">
          账号
        </view>
        <input type="text" :value="username" @input="inputValue1" placeholder="请输入您的账号" />
      </view>
      <view class="item">
        <view class="label">
          密码
        </view>
        <input type="text" :value="password" @input="inputValue2" placeholder="请输入您的密码" />
      </view>
      <!-- <view class="item"> -->
        <!-- <view class="label">
          验证码
        </view> -->
       <!-- <view class="yzmBox">
          <input type="text" value="" placeholder="请输入验证码" />
          <view class="yzm" @click="send">
            发送验证码
          </view>
        </view> -->
      <!-- </view> -->
      <button type="default" @tap="submit">注册</button>
    </view>
    <view class="agree">
      注册代表您同意 xxxxx某某协议
    </view>
  </view>
</template>

<script>
	import { Register } from '../../api/index.js'
  export default {
    data() {
      return {
		  username:'',
		  password:''

      }
    },
    methods: {
	  inputValue1(e){
		  this.username = e.target.value
	  },
	  inputValue2(e){
	  		  this.password = e.target.value
	  },
      send() {
        uni.showToast({
          title: "发送验证码"
        })
      },
      async submit() {
		  let dataForm = {
			  username:this.username,
			  password:this.password
		  }
		  const { data:res } = await Register(dataForm)
		  console.log(res,'register')
			if(res.status==0){
				uni.showToast({
				  title: "注册成功",
				  icon: "none"
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				},2000)
			}
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .content {
    min-height: 100vh;
  }

  .topBox {
    position: relative;
    height: 400rpx;
    background-color: #00aaff;
  }

  .tit {
    width: 90%;
    font-size: 60rpx;
    color: #ffffff;
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
  }

  .desc {
    width: 90%;
    font-size: 30rpx;
    color: #f8f8f8;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
  }

  .bottomBox {
    margin-top: 20rpx;
    min-height: 500rpx;
    padding: 50rpx;
  }

  .item {
    margin-bottom: 60rpx;
    border-bottom: 1px solid #ccc;
  }

  .item .label {
    font-size: 32rpx;
    color: #00aaff;
    font-weight: 600;
    margin-bottom: 20rpx;
  }

  .item input {
    height: 70rpx;
    padding-bottom: 20rpx;
    font-size: 32rpx;
    color: #333;
  }

  .uni-input-placeholder {
    color: #bebebe;
  }

  .yzmBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .yzm {
    color: #ffffff;
    font-size: 28rpx;
    padding: 5rpx 8rpx;
    background-color: #00aaff;
  }

  button {
    line-height: 85rpx;
    text-align: center;
    background: rgb(0, 170, 255);
    color: #fff;
    margin-top: 100rpx;
  }

  .agree {
    position: fixed;
    bottom: 60rpx;
    left: 0;
    text-align: center;
    width: 100%;
    color: #919191;
    font-size: 30rpx;
  }
</style>